<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>原生Ajax</title>
	<script type="text/javascript">
		window.onload = function(){
			//第一步：创建xhr对象
			var xhr = null;
			if(window.XMLHttpRequest){    //如果有这个对象  则为标准浏览器
				xhr = new XMLHttpRequest();      //实例化这个对象
			}else{
				xhr = new ActiveXObject('Microsoft.XMLHTTP');
			}
			console.log("状态q"+xhr.readyState);
			//第二步准备发送请求   配置一些发送请求的行为
			xhr.open('get','./Ajax.php',true);     //三个参数 第一个是提交方法 第二个是提交地址 第三个是异步true 同步false
			console.log("状态w"+xhr.readyState);
			//第三步执行发送动作
			xhr.send(null);
			console.log("状态e"+xhr.readyState);
			//第四步指定一些回调函数
			xhr.onreadystatechange = function(){
				// xhr.readyState = 0-4;   有5种状态  0表示对象创建完成  1表示发送请求的动作已经准备完成，但还没开始发送  2表示已经发送完成  3表示服务器已经返回了数据  4表示服务器的数据已经可以使用
				//console.log(123); 

				if(xhr.readyState == 4){   
					if(xhr.status == 200){   //Http请求成功
						var data = xhr.responseText;
						//var data1 = xhr.responseXML;
					}
				}
				console.log("状态t"+xhr.readyState);
			}
			//console.log(456);
			console.log("状态r"+xhr.readyState);
		}
	</script>
</head>
<body>
<div>
		<div id="showInfo"></div>
		<form>
			用户名：<input type="text" name="username" id="username"><br>
			密码：<input type="password" name="password" id="password"><br>
			<input type="submit" value="提交" id="btn">
		</form>

	</div>
</body>
</html>